import React from "react";

import { uniqueId } from "lodash";
import type { SVGProps } from "react";

const Extension = (props: SVGProps<SVGSVGElement>) => {
  const clipPathId = uniqueId("clip-path-");
  return (
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" {...props}>
      <path fill="#fff" d="M0 0h32v32H0z" />
      <g clipPath={`url(#${clipPathId})`} stroke="#693202" strokeWidth=".52">
        <path
          d="M26.412 12.12a.245.245 0 0 0-.245 0l-9.898 5.715a.245.245 0 0 0-.122.212v7.76a.244.244 0 0 0 .367.211l9.898-5.714a.245.245 0 0 0 .122-.212v-7.76a.245.245 0 0 0-.122-.212Z"
          fill="#F39C12"
        />
        <path
          d="M16.39 17.765v8.186c0 .056-.046.102-.096.08a.219.219 0 0 1-.025-.012L6.37 20.304a.244.244 0 0 1-.123-.212v-7.76a.244.244 0 0 1 .367-.212l9.776 5.645Z"
          fill="#E67E22"
        />
        <path
          d="m26.411 12.12-9.898-5.714a.244.244 0 0 0-.244 0L6.37 12.121a.245.245 0 0 0 0 .423l9.898 5.715a.243.243 0 0 0 .244 0l9.898-5.715a.245.245 0 0 0 0-.423Z"
          fill="#F1C40F"
        />
        <path
          d="M18.561 8.893V7.247a.245.245 0 0 0-.245-.244h-3.645a.244.244 0 0 0-.245.244v1.66c.003.37.236.706.656.949.396.228.904.342 1.412.342.508 0 1.015-.114 1.411-.342.423-.245.657-.584.657-.956v-.007h-.001Z"
          fill="#E67E22"
        />
        <path
          d="M17.905 6.291c-.792-.457-2.032-.457-2.823 0-.423.244-.656.584-.656.956s.233.712.656.956c.396.229.904.343 1.412.343.508 0 1.015-.114 1.411-.343.423-.244.656-.584.656-.956s-.233-.712-.656-.956Z"
          fill="#F9D641"
        />
        <path
          d="M23.44 10.014h-3.645a.244.244 0 0 0-.245.244V11.911c0 .372.234.712.657.956.396.228.903.343 1.411.343s1.016-.115 1.411-.343c.424-.245.657-.584.657-.957v-1.652a.245.245 0 0 0-.245-.244Z"
          fill="#E67E22"
        />
        <path
          d="M23.029 9.302c-.791-.457-2.031-.457-2.823 0-.423.244-.656.584-.656.956s.234.712.657.956c.396.229.903.343 1.411.343s1.016-.114 1.412-.343c.423-.244.656-.584.656-.956s-.233-.712-.657-.956Z"
          fill="#F9D641"
        />
        <path
          d="M13.006 12.055v-1.647a.245.245 0 0 0-.245-.244H9.115a.245.245 0 0 0-.244.244v1.659c.002.37.235.707.656.95.396.229.904.343 1.412.343.508 0 1.015-.114 1.411-.343.423-.244.657-.584.657-.956v-.006h-.001Z"
          fill="#E67E22"
        />
        <path
          d="M12.35 9.452c-.792-.457-2.032-.457-2.823 0-.423.244-.656.584-.656.956s.233.712.656.956c.396.229.904.343 1.412.343.508 0 1.015-.114 1.411-.343.423-.244.656-.584.656-.956s-.233-.712-.656-.956Z"
          fill="#F9D641"
        />
        <path
          d="M17.885 13.175h-3.646a.245.245 0 0 0-.245.244v1.652c0 .373.234.712.657.956.396.229.903.343 1.411.343s1.016-.114 1.411-.343c.421-.243.655-.58.657-.95v-1.659a.244.244 0 0 0-.245-.244Z"
          fill="#E67E22"
        />
        <path
          d="M17.473 12.463c-.791-.457-2.031-.457-2.822 0-.424.245-.657.584-.657.956s.234.712.657.956c.396.229.903.343 1.411.343s1.016-.114 1.412-.343c.423-.244.656-.584.656-.956s-.233-.711-.657-.956Z"
          fill="#F9D641"
        />
      </g>
      <defs>
        <clipPath id={clipPathId}>
          <path fill="#fff" transform="translate(5 5)" d="M0 0h22v22H0z" />
        </clipPath>
      </defs>
    </svg>
  );
};
export default Extension;
